Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Index Page to Groundwork/React #658

Draft
wants to merge 16 commits into
base: develop
Choose a base branch
from

Conversation

krowvin
Copy link
Collaborator

@krowvin krowvin commented May 21, 2024

Update Landing Page to Groundwork + React using Vite.js

This PR is for issue #572

NOTE THIS PR SHOULD NOT BE APPROVED UNTIL CONFIRMED WORKING ON VARIOUS URL PATHS
See Route Issues below - Looking for assistance and suggestions on this!

Major Changes:

  • Converted from vanillaJS/CSS to React/Tailwind
  • Followed the groundwork guidelines to implement the Groundwork components created for WM/USACE
  • Converted the static pages to client-side routed pages via react-router-dom (see below)
  • Requires a build step:
    From the cwms-data-api\src\main\webapp-src path run npm run to see the available commands or open cwms-data-api/src/main/webapp-src/package.json and look at scripts.
  1. Run npm run build
  2. Copy the contents that get output into dist to the webapps directory (there is a script that will do this for windows in the package.json)

Things of Note:

  • Groundwork recommends Redux-Bundler as the client-side routing framework. However, in testing I attempted to use both this and react-router-dom to override the dynamic client-side routing.
  • The cwms-data-api/src/main/webapp/WEB-INF/web.xml had to be edited to handle 404 Not Found errors and pass them back to the client to handle the client-side routing. There may be a better way to handle this.

Route Issues

I was able to get this working by hard coding the base path in vite.js and in cwms-data-api\src\main\webapp-src\src\bundles\route-bundle.js

However, we need this to be dynamic for the district T7s.

I took two attempts at this:

  • Once with redux-bundler -> Initial commits
  • Another try with react-router-dom -> Current HEAD state

If you would like to jump to the commit where I had redux-bundler setup the commit hash is 7c572b4635d13bbcbd907bab3a47a9b12732c2ce

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: In Progress
Development

Successfully merging this pull request may close these issues.

1 participant